<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直播间弹幕统计动态图表</title>
    <!-- 引入 ECharts -->
    <script src="/sites/modules/echarts/echarts.min.js"></script>
    <style>
        /* 用于显示发送者昵称的容器样式 */
        #sender-names {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- 定义图表容器 -->
    <div id="main" style="width: 1000px; height: 600px;"></div>
    <!-- 用于显示发送者昵称的容器 -->
    <div id="sender-names"></div>

    <script>
        // 模拟 PHP 数据
        const rows = {
            2001: {
                count: 150,
                name: ['张三', '李四', '王五'],
                added: 150
            },
            2002: {
                count: 153,
                name: ['张三', '李四', '王五'],
                added: 3
            },
            2003: {
                count: 158,
                name: ['张三', '李四', '王五'],
                added: 5
            }
        };


        // 初始化图表
        const myChart = echarts.init(document.getElementById('main'));

        // 定义数据数组
        const times = [];
        const counts = [];
        const addeds = [];
        const names = [];

        // 处理数据
        for (const time in rows) {
            times.push(time);
            counts.push(rows[time].count);
            addeds.push(rows[time].added);
            names.push(rows[time].name.join(', '));
        }

        // 配置项
        const option = {
            legend: {
                data: ['总弹幕量', '每分钟增量']
            },
            xAxis: {
                type: 'category',
                data: times
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '总弹幕量',
                    type: 'line',
                    data: counts
                },
                {
                    name: '每分钟增量',
                    type: 'bar',
                    data: addeds
                }
            ]
        };

        // 使用配置项显示图表
        myChart.setOption(option);

        // 获取显示发送者昵称的容器
        const senderNamesDiv = document.getElementById('sender-names');

        // 动态展示数据
        let index = 0;
        const intervalId = setInterval(() => {
            if (index < times.length) {
                const newTimes = times.slice(0, index + 1);
                const newCounts = counts.slice(0, index + 1);
                const newAddeds = addeds.slice(0, index + 1);

                option.xAxis.data = newTimes;
                option.series[0].data = newCounts;
                option.series[1].data = newAddeds;

                myChart.setOption(option);

                // 更新发送者昵称显示
                senderNamesDiv.textContent = `当前分钟（${times[index]}）发送者: ${names[index]}`;

                index++;
            } else {
                clearInterval(intervalId);
            }
        }, 2000);
    </script>
</body>

</html>